Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs: {
      type: Array,
      value: ['tab1', 'tab2']
    },
    layout: {
      type: String,
      value: 'left'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabCur: 0,
    tabsLayout: 'center'
  },

  lifetimes: {
    attached: function(){
      this.setTabsLayout();
      console.log('tabs: attached done, layout:', this.data.tabsLayout);
    }
  },

  observers: {
    'layout': function(text){
      this.setTabsLayout();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tabTap: function (arg) {
      this.setData({
        tabCur: arg.currentTarget.dataset.id
      });
      this.triggerEvent('select', {
        id: arg.currentTarget.dataset.id
      }, {});
    },

    setTabsLayout: function(){
      switch(this.properties.layout){
        case 'center':
          this.setData({tabsLayout: 'center'});
          break;
        case 'left':
          this.setData({tabsLayout: 'flex-start'});
          break;
        case 'right':
          this.setData({tabsLayout: 'flex-end'});
          break;
        case 'around':
          this.setData({tabsLayout: 'space-around'});
          break;
        case 'even':
          this.setData({tabsLayout: 'space-between'});
          break;
        default:
          this.setData({tabsLayout: 'left'});
          break;
      }
    }
  }
})